import styled from 'styled-components';
import {
	BorderRadius,
	GlobalMargin,
	CardBackground,
	BorderColor,
	GlobalPadding
} from '@/config/style-global';

interface IProps {
	// toolbar_padding?: boolean;
	content_height?: number;
	table_size?: string;
}

type SearchProps = {
	box_height: number | null;
};
// 搜索框容器
export const SearchStyle = styled.div<SearchProps>`
	width: 100%;
	height: ${(props) => (props.box_height ? props.box_height + 'px' : 'auto')};
	overflow: hidden;
	padding: 24px ${GlobalPadding}px 0;
	border-radius: ${BorderRadius}px;
	background-color: ${CardBackground};
	margin-bottom: ${GlobalMargin}px;
	display: flex;
	justify-content: space-between;

	.form-box {
		width: calc(100% - 200px);
	}
	.search-btn {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;

		.divider {
			width: 1px;
			height: calc(100% - 24px);
			margin-right: ${GlobalMargin}px;
			background-color: #d9d9d9;
			display: inline-block;
			vertical-align: top;
		}
		.btns {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: flex-start;
			.handle-height {
				cursor: pointer;
				margin-top: 10px;
				display: inline-block;
			}
		}
	}
`;

export const TableContentStyle = styled.div<IProps>`
	position: relative;
	width: 100%;
	min-height: 200px;
	height: ${(props) =>
		props.content_height ? `calc(100% - ${props.content_height + GlobalMargin ?? 0}px)` : 'auto'};
	border-radius: ${BorderRadius}px;
	background-color: ${CardBackground};
	/* border-bottom: ${BorderColor}; */
	padding: ${GlobalPadding}px;
	overflow: hidden;

	.toolbars {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 12px;
		height: 50px;
		/* padding: 0 ${GlobalPadding}px; */

		.title {
			margin-right: 12px;
		}
		.refresh {
			cursor: pointer;
		}
	}
	.table-row-click {
		background-color: #bde6ff;
		.ant-table-cell-row-hover {
			background-color: #bde6ff !important;
		}
		.ant-table-cell-fix-left,
		.ant-table-cell-fix-right {
			background-color: #bde6ff;
		}
	}
	.table-pointer {
		cursor: pointer;
	}
	.pagination {
		width: 100%;
		background: #fff;
		display: flex;
		justify-content: flex-end;
		padding: 10px;
		z-index: 3;
		position: absolute;
		bottom: 0;
		right: 0;
	}
`;

export const PageLayoutStyle = styled.div`
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* border: 1px solid red; */
	display: flex;
	flex-direction: column;
	.search_content {
		height: auto;
	}
	.table_content {
		flex: 1;
		overflow: hidden;
	}
`;
